<template>
  <div v-html="content" class="table-cell">
  </div>
</template>
<script>
function convertPortalBodyType(bodyType) {
  var bodyTypeClass = "html_16";
  if ("FORM" == bodyType || "20" == bodyType) {
    bodyTypeClass = "form_text_16";
  } else if ("TEXT" == bodyType || "30" == bodyType) {
    bodyTypeClass = "txt_16";
  } else if ("OfficeWord" == bodyType || "41" == bodyType) {
    bodyTypeClass = "doc_16";
  } else if ("OfficeExcel" == bodyType || "42" == bodyType) {
    bodyTypeClass = "xls_16";
  } else if ("WpsWord" == bodyType || "43" == bodyType) {
    bodyTypeClass = "wps_16";
  } else if ("WpsExcel" == bodyType || "44" == bodyType) {
    bodyTypeClass = "xicon-wps-color xls_16";
  } else if ("Pdf" == bodyType || "45" == bodyType) {
    bodyTypeClass = "pdf_16";
  } else if ("Ofd" == bodyType || "46" == bodyType) {
    bodyTypeClass = "office46_16";
  } else if ("videoConf" == bodyType) {
    bodyTypeClass = "meeting_video_16";
  }
  return bodyTypeClass;
}
import { iconFlow } from '../icon-data';
export default {
  name: "TableCollum",
  props: {
    record: Object,
    type: String
  },
  data() {
    return {
      content: ''
    };
  },
  methods: {
    getRenderHtml(type, data) {
      let txt = data[type];
      if (type == "workitemId") {
        txt = '<input type="checkbox" name="workitemId" gridrowcheckbox="gridId_classtag" class="noClick" row="' + r + '" value="' + data.id + '">';
      }
      if (type == "subject") {
        var txtClass = "titleText";
        var isShowImportantLevel = data.importantLevel != null && data.importantLevel != ""
          && (data.importantLevel == 2 || data.importantLevel == 3 || data.importantLevel == 4 || data.importantLevel == 5);
        if (isShowImportantLevel && data.applicationCategoryKey === 4) {
          txtClass = "titleText-improtant";
        }
        var tmpTxt = this.reverse(txt);
        txt = "<span class='" + txtClass + "' title='" + txt + "'>" + tmpTxt + '</span>';
        //加图标
        //加图标 三方待办不支持获取流程状态
        if (data.applicationCategoryKey != 39 && !data.thirdApp) {
          //流程状态
          if (data.summaryState !== null && data.summaryState !== "" && data.summaryState != "0") {
            txt = "<span style='color:#449bc0;' class='" + iconFlow[data.summaryState] + "'></span>" + txt;
          }
        }
        //重要程度
        if (isShowImportantLevel) {
          if (data.applicationCategoryKey === 4) {
            // 这里使用input标签的是为了不让父标签的title属性识别到重要程度标识中的文字，例如：平急、加急、特急、特提
            if (data.importantLevel === 2) {
              txt = "<input class='important-level important-level-2' style='color: white;' readonly='readonly' value='" + this.$i18n('govdoc.quick.normal') + "'/>" + txt;
            } else if (data.importantLevel === 3) {
              txt = "<input class='important-level important-level-3' style='color: white;' readonly='readonly' value='" + this.$i18n('govdoc.quick.expedited') + "'/>" + txt;
            } else if (data.importantLevel === 4) {
              txt = "<input class='important-level important-level-4' style='color: white;' readonly='readonly' value='" + this.$i18n('govdoc.quick.express') + "'/>" + txt;
            } else if (data.importantLevel === 5) {
              txt = "<input class='important-level important-level-5' style='color: white;' readonly='readonly' value='" + this.$i18n('govdoc.quick.teti') + "'/>" + txt;
            }
          } else {
            txt = "<span style='color:#fb3a36;' class='icon-default xicon-important" + (data.importantLevel - 1) + "'></span>" + txt;
          }
        }
        //密级
        if (typeof (data.secretLevel) != "undefined" && data.secretLevel != null && data.secretLevel != "") {
          txt = "<span style='color:red;'>[" + data.secretLevel + "]&nbsp;</span>" + txt;
        }
        //附件
        if (data.hasAttachments) {
          txt = txt + "<span style='color:#FE7A22' class='icon-default xicon-affix'></span>";
        }
        //协同类型
        if (data.bodyType !== "" && data.bodyType !== null && data.bodyType !== "10" && data.bodyType !== "30" && data.bodyType !== "HTML") {
          var bodyType = data.bodyType;
          var bodyTypeClass = convertPortalBodyType(bodyType);
          if (bodyTypeClass != "html_16") {
            txt = txt + "<span class='icon-default ico16 " + bodyTypeClass + "'></span>";
          }
        }
        txt = "<a class='color_black' style='display: flex;align-items: center;width:100%;'>" + txt + "</a>";
      }
      // else if (type == "categoryLabel") {
      //   if (data.applicationCategoryKey == 81 || data.applicationCategoryKey == 39 || data.thirdApp) {
      //     txt = txt;
      //   } else {
      //     if (data.hasResPerm == true) {
      //       txt = "<a href='javascript:void(0)' class='noClick' onclick='linkToDone(" + data.applicationCategoryKey + ", " + data.applicationSubCategoryKey + ")'>" + txt + "</a>";
      //     }
      //   }
      // }
      return txt;
    },
    reverse(str) {
      str = str.replace(/</g, '\&lt');
      str = str.replace(/>/g, '\&gt');
      return str;
    }
  },
  created() {
    this.content = this.getRenderHtml(this.type, this.record);
  }
};
</script>
<style lang="scss" scoped>
.table-cell {
  display: flex;
  align-items: center;

  .color_blue {
    color: #2490f8;
  }

  .color_red {
    color: red;
  }

  .color_black {
    color: #111;
  }

  .icon-default {
    font-weight: initial;
  }
  
}
</style>
<style>
.xls_16.xicon-wps-color{
    color: #11b5d2;
}
.important-level {
  width: 32px;
  height: 16px;
  line-height: 16px;
  border-radius: 2px;
  text-align: center;
  margin-right: 4px;
  margin-left: -2px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  display: inline-block;
  font-size: 12px;
  transform: scale(0.83);
  padding: 1px 3px;
  color: #ffffff;
  letter-spacing: 0;
  border: none;
  cursor: pointer;
}

.important-level-2 {
  background: #3759ec;
}

.important-level-3 {
  background: #ffa324;
}

.important-level-4 {
  background: #fc6c1d;
}

.important-level-5 {
  background: #fa3d12;
}

.titleText {
  display: inline-block;
  max-width: calc(100% - 60px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
